<html>
<head>
	<script type="text/javascript" src="main.js"></script>
	<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
	<script type="text/javascript" src="jqplot.pieRenderer.min.js"></script>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.min.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body onload="load(); wSmall();">
	
	<!-- The Icons in the Popup -->
	<nav class="top-bar">
		<button onclick="close_report_if_open(); toggle_settings();"><img src="icons/gear.png"></button>
		<button onclick="close_settings_if_open(); toggle_report();"><img src="icons/report.png"></button>
		<button onclick="add_break_site(
            get_current_url()); wSmall(); show_list_of_break_sites();
            document.getElementById('report').style.display = 'none'; 
            document.getElementById('settings').style.display = 'none';"><img src="icons/add.png"></button>
		<button onclick="remove_break_site(get_current_url()); wSmall(); show_list_of_break_sites();
		document.getElementById('report').style.display = 'none';
		document.getElementById('settings').style.display = 'none';"><img src="icons/remove.png"></button>
	</nav>
	<br>

	<!-- The Report -->
	<span id="report" style="display:none">
		Timer: <span id="timer"></span><br>
		Total work time: <span id="work_time"></span><br>
		Total break time: <span id="break_time"></span><br>
		<div id="chartdiv"></div>
	</span>

	<!-- The Settings -->
	<span id="settings" style="display:none">

		<div class="cb">
			<label data-tooltip class="has-tip tip-top" title="Colour options for setting borders around webpages to remind you which mode you are in." for="work_border_checkbox">Colour Borders:</label>

			<input id="work_border_checkbox" type="checkbox" onClick="toggle_work_border()"> Work Colour <br>
			<span id="work_border" style="display:none">
				If I am working, my colour theme should be 
				<select id="work_border_colour" onchange="set_work_border()">
					<option value="red">red</option>
					<option value="orange">orange</option>
					<option value="yellow">yellow</option>
					<option value="green">green</option>
					<option value="blue">blue</option>
				</select>
			
			</span>
			<input id="break_border_checkbox" type="checkbox" onClick="toggle_break_border()"> Break Colour <br>
			<span id="break_border" style="display:none">
				If I am taking a break, my colour theme should be 
				<select id="break_border_colour" onchange="set_break_border()">
					<option value="red">red</option>
					<option value="orange">orange</option>
					<option value="yellow">yellow</option>
					<option value="green">green</option>
					<option value="blue">blue</option>
				</select>
			
			</span>
		</div>
		<div class="notifications">
			<label data-tooltip class="has-tip tip-top" title="Enable or disable notifications and set the interval for when you want to be alerted." for="work_checkbox">Notifications:</label>

			<input id="work_checkbox" type="checkbox" onclick="toggle_work_notifications()"> Work Notifications <br>
			<span id="work_notifications" style="display:none">
				If I am working, tell me to take a break every:
				<select id="work_notifications_interval" onchange="set_work_notifications()">
					<option value="0.2">12 seconds</option>
					<option value="0.5">30 seconds</option>
					<option value="10">10 minutes</option>
					<option value="15">15 minutes</option>
					<option value="20">20 minutes</option>
					<option value="30">30 minutes</option>
					<option value="40">40 minutes</option>
					<option value="60">60 minutes</option>
				</select>
			</span>
			<input id="break_checkbox" type="checkbox" onClick="toggle_break_notifications()"> Break Notifications <br>
			<span id="break_notifications" style="display:none">
				If I am taking a break, tell me to get to work every:
				<select id="break_notifications_interval" onchange="set_break_notifications()">
					<option value="0.2">12 seconds</option>
					<option value="0.5">30 seconds</option>
					<option value="10">10 minutes</option>
					<option value="15">15 minutes</option>
					<option value="20">20 minutes</option>
					<option value="30">30 minutes</option>
					<option value="40">40 minutes</option>
					<option value="60">60 minutes</option>
				</select>
			</span></div>
			<div class="breaklist">
				<form class="custom">
				<span id="list_of_break_sites"></span>
				</form
			</div>
		</span>

		<script>
		document.write('<script src=' +
			('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
			'.js><\/script>')
		</script>
		<script src="js/foundation.min.js"></script>
		<script>
		$(document).foundation();
		</script>
	</body>
	</html>
